<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js案例一</title>
    <script src="echarts.min.js"></script>
    <style type="text/css">
        .table{
            height: 300px;
            width: auto;
            position: relative;
            top: 20px;
        }
        #char{
            position: absolute;
            left: 0px;
            top: 0px;
        }
        #chart{
            position: absolute;
            top: 0px;
            left: 680px;
        }
        .til{
            position: relative;
            padding-top: 0px;
            margin-top: 0px;
        }
        #meta{
            position: absolute;
            right: 0px;
            top: 0px;
            text-align: right;

        }
    </style>

</head>
<body>
    <div class="til">
        <h1>Test Results Report</h1>
        <div id="meta">生成报告时间： 18:03 CST on 星期三 03 七月 2019
            <br/><span id="systemInfo">admin@DESKTOP-5QFNH77&nbsp;/&nbsp;Java 1.8.0_144 (Oracle Corporation)&nbsp;/&nbsp;Windows 10 10.0 (amd64)</span>
        </div>
    </div>


    <div class="table">
        <div id="char" style="width:600px;height:300px;"></div>
        <div id="chart" style="width:600px;height:300px;"></div>
    </div>


    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('char'));

        var weatherIcons = {
            'Sunny': './data/asset/img/weather/sunny_128.png',
            'Cloudy': './data/asset/img/weather/cloudy_128.png',
            'Showers': './data/asset/img/weather/showers_128.png'
        };

        option = {
            title: {
                text: '测试报告统计',
                subtext: '自动生成的数据',
                left: 'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                // orient: 'vertical',
                // top: 'middle',
                bottom: 10,
                left: 'center',
                // data: [ 'Max','Good','Pass','Skip','Filed']
                data: ['Pass','Skip','Filed']
            },
            series : [
                {
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data:[
                        {
                            value:2,
                            name: 'Filed',
                            // label: {
                            //     normal: {
                            //         // formatter: [
                            //         //     '{title|{b}}{abg|}',
                            //         //     '  {weatherHead|名称}{valueHead|数量}{rateHead|占比}',
                            //         //     '{hr|}',
                            //         //     '  {Sunny|亲清..}{value|202}{rate|55.3%}',
                            //         //     '  {Cloudy|百度..}{value|142}{rate|38.9%}',
                            //         //     '  {Cloudy|百度..}{value|142}{rate|38.9%}',
                            //         //     '  {Cloudy|百度..}{value|142}{rate|38.9%}',
                            //         //     '  {Cloudy|百度..}{value|142}{rate|38.9%}',
                            //         //     '  {Cloudy|百度..}{value|142}{rate|38.9%}',
                            //         //     '  {Cloudy|百度..}{value|142}{rate|38.9%}',
                            //         //     '  {Cloudy|百度..}{value|142}{rate|38.9%}',
                            //         //     '  {Cloudy|百度..}{value|142}{rate|38.9%}',
                            //         //     '  {Showers|Total}{value|21}{rate|5.8%}'
                            //         // ].join('\n'),
                            //         backgroundColor: '#eee',
                            //         borderColor: '#777',
                            //         borderWidth: 1,
                            //         borderRadius: 4,
                            //         rich: {
                            //             title: {
                            //                 color: '#eee',
                            //                 align: 'center'
                            //             },
                            //             abg: {
                            //                 backgroundColor: '#333',
                            //                 width: '100%',
                            //                 align: 'right',
                            //                 height: 25,
                            //                 borderRadius: [4, 4, 0, 0]
                            //             },
                            //             Sunny: {
                            //                 height: 30,
                            //                 align: 'left',
                            //                 backgroundColor: {
                            //                     image: weatherIcons.Sunny
                            //                 }
                            //             },
                            //             Cloudy: {
                            //                 height: 30,
                            //                 align: 'left',
                            //                 backgroundColor: {
                            //                     image: weatherIcons.Cloudy
                            //                 }
                            //             },
                            //             Showers: {
                            //                 height: 30,
                            //                 align: 'left',
                            //                 backgroundColor: {
                            //                     image: weatherIcons.Showers
                            //                 }
                            //             },
                            //             weatherHead: {
                            //                 color: '#333',
                            //                 height: 24,
                            //                 align: 'left'
                            //             },
                            //             hr: {
                            //                 borderColor: '#777',
                            //                 width: '100%',
                            //                 borderWidth: 0.5,
                            //                 height: 0
                            //             },
                            //             value: {
                            //                 width: 20,
                            //                 padding: [0, 20, 0, 30],
                            //                 align: 'left'
                            //             },
                            //             valueHead: {
                            //                 color: '#333',
                            //                 width: 20,
                            //                 padding: [0, 20, 0, 30],
                            //                 align: 'center'
                            //             },
                            //             rate: {
                            //                 width: 40,
                            //                 align: 'right',
                            //                 padding: [0, 10, 0, 0]
                            //             },
                            //             rateHead: {
                            //                 color: '#333',
                            //                 width: 40,
                            //                 align: 'center',
                            //                 padding: [0, 10, 0, 0]
                            //             }
                            //         }
                            //     }
                            // }
                        },
                        // {value:535, name: 'Max'},
                        // {value:510, name: 'Good'},
                        {value:0, name: 'Skip'},
                        {value:1, name: 'Pass'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('chart'));

    var app = {};

    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };


    var labelOption = {
        normal: {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                    textBorderColor: '#fff'
                }
            }
        }
    };

    var option1 = {
        title: {
            text: '测试报告统计',
            subtext: '自动生成的数据',
            left: 'left'
        },
        color: [ '#198087','#003366', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['Pass', 'Skip', 'Filed']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data:
                    [
                    '亲清..', '百度..'

                     ]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Pass',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: [320, 332]
            },
            {
                name: 'Skip',
                type: 'bar',
                label: labelOption,
                data: [150, 232]
            },
            {
                name: 'Filed',
                type: 'bar',
                label: labelOption,
                data: [98, 77]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
</script>

</body>
</html>